<template>
<div>
  <!-- 
    v-model:
      输入框中的内容发生变化，username也会跟着变化
        表单value值变化 --- 绑定的变量值也跟着变化
      username的值发生变化，输入框的内容也跟着变化
        变量的值发生变化 --- 绑定表单原生的value属性值也跟着变化
    像这种相互影响的效果，就叫双向绑定
      数据变化 --- 视图自动同步
      视图变化 --- 数据自动同步
   -->
  <input v-model="username" placeholder="请输入用户名" type="text">
  <p>{{ username }}</p>
</div>
</template>
<script>
export default {
  data(){
    return {
      username: "小明"
    }
  }
}
</script>
<style scoped>
</style>